<template>
  <div>
    <div class="menu">
      <el-button type="primary" size="small" @click="openAddGoods">添加</el-button>
      <div class="vagueFind" style="margin-left: 25px;">
        <el-form :inline="true" :model="vagueFindForm" class="demo-form-inline" size="small">
          <el-form-item label="隶属分类">
            <template>
              <el-select v-model="vagueFindForm.classifyName" placeholder="可选择分类" clearable>
                <el-option
                  v-for="item in classifyList"
                  :key="item.classifyId"
                  :label="item.classifyName"
                  :value="item.classifyId"
                  v-if="item.classifyType==0">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="价格(<=):">
            <el-input v-model="vagueFindForm.price" placeholder="请输入价格" clearable style="width: 120px;"
            :maxlength="4" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="vagueFindForm.goodsName" placeholder="请输入商品名称" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getGoodsList(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="info" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="clearvagueFindForm"></el-button>
      </div>
    </div>
    <!-- 商品列表 -->
    <el-table :data="goodsList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="goodsId" label="商品ID" width="140">
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名称" width="240">
      </el-table-column>
      <el-table-column prop="price" label="单价/500/g(ml)/个">
      </el-table-column>
      <el-table-column prop="specification" label="规格(个/g/ml)">
      </el-table-column>
      <el-table-column prop="goodsImg" label="商品图片"  width="180">
        <template v-slot="scope">
          <img :src="scope.row.goodsImg" />
        </template>
      </el-table-column>
      <el-table-column prop="classify.classifyName" label="隶属分类"  width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="openEditor(scope.row)">编辑</el-button>&nbsp;&nbsp;
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delGoods(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="8" @current-change="getGoodsList"
    	:total="goodsCount">
    </el-pagination>
    <AddGoods :addVisible="addVisible" :addOptions="addOptions"></AddGoods>
    <EditorGoods :editorVisible="editorVisible" :editorOptions="editorOptions" :editorObj="editorObj"></EditorGoods>
  </div>
</template>

<script>
  import AddGoods from "./component/AddGoods.vue"
  import EditorGoods from "./component/EditorGoods.vue"
  export default {
    name: "rotation",
    components: {
    	AddGoods,
      EditorGoods,
    },
    data() {
      return {
        loadStatus: false,
        //添加商品
        addVisible: false,
        addOptions:{},
        //修改商品
        editorVisible:false,
        editorOptions:{},
        editorObj:{},
        //接收后台传值
        goodsList:[],
        goodsCount:0,
        // 模糊查询用实体
        vagueFindForm: {
          goodsName:"",
          price:null,
          classifyName:"",
        },
        classifyList:{},
        //是否允许执行查询方法
        goFunction:true,
      }
    },
    //默认渲染页面时执行的方法
    mounted() {
    	this.getGoodsList(1)
    },
    methods: {
      //清楚模糊查询方法
      clearvagueFindForm(){
        //清楚模糊查询表单中的内容并返回原始数据的第一页
        this.vagueFindForm={
          goodsName:"",
          price:null,
          classifyName:"",
        }
        this.getGoodsList(1)
      },
      //打开添加商品信息子页面
      openAddGoods() {
        this.addOptions = this.classifyList
      	this.addVisible = true
      },
      //打开修改商品信息子页面
      openEditor(obj){
      	// console.log(obj)
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(obj.goodsId){
          this.editorObj=obj
          this.editorOptions = this.classifyList
          this.editorVisible=true
        }else{
          this.$message({
            message: "获取数据错误",
            type: "error",
            duration: 1000,
          })
        }
      },
      //查询商品数据方法
      getGoodsList(page){
        var self = this;
        self.loadStatus = true
        sessionStorage.setItem("page",page)
        var manager = JSON.parse(sessionStorage.getItem("manager"))
        this.goFunction=true
        //进行空值还原，防止数据类型错误
        if(this.vagueFindForm.price===""){
          this.vagueFindForm.price=null
        }
        //前提是这个不是空值
        if(this.vagueFindForm.price!=null){
          //判断价格参数是不是正整数
          var reg = /(^[1-9]\d*$)/
          // var num = this.vagueFindForm.price
          // console.log("num:"+num)
          // console.log("数值型:"+isNaN(this.vagueFindForm.price))
          // console.log("正整数:"+reg.test(this.vagueFindForm.price))
          //判断是否含有非法字符
          if(this.vagueFindForm.price.split(" ").length==1){
            //判断是否是正整数数值型
            if(!reg.test(this.vagueFindForm.price)){
              //不符合规格不允许执行查询方法
              self.goFunction = false
              self.$message({
                duration: 1500,
                message: "价格不符合规格!",
                type: "error",
                onClose: function() {
                  self.loadStatus = false
                },
              });
            }
          }else{
            //不符合规格不允许执行查询方法
            self.goFunction = false
            self.$message({
              duration: 1500,
              message: "价格文本框中存在非法字符空格!",
              type: "error",
              onClose: function() {
                self.vagueFindForm.price = ""
                self.loadStatus = false
              },
            });
          }
        }
        // console.log(self.goFunction)
        //是否允许执行查询方法
        if(self.goFunction){
          //判断是否含有非法字符
          if(this.vagueFindForm.goodsName.split(" ").length==1){
              self.$http({
                url: "/api/CakeShop/GoodsManage/showGoodsInfo",
                method: "post",
                headers: {
                	token: manager.token
                },
                data: {
                  goods:{
                    goodsName:self.vagueFindForm.goodsName,
                    price:self.vagueFindForm.price,
                    classify:{
                      start: page,
                      pageSize: 8,
                      classifyId:self.vagueFindForm.classifyName,
                    }
                  }
                },
              }).then(function(res) {
                // console.log(res)
                if (res.data.goodsList != null || res.data.goodsList != {}) {
                  //返回数据总数
                  self.goodsCount = res.data.pageCount
                  //返回符合条件的所有数据
                  self.goodsList = res.data.goodsList
                  //返回下拉框数据
                  self.classifyList = res.data.classifyList
                  self.loadStatus = false
                }
              }).catch(function(error) {
                self.loadStatus = false
              });
          }else{
            self.$message({
              duration: 1500,
              message: "商品名称文本框中存在非法字符空格!",
              type: "error",
              onClose: function() {
                self.vagueFindForm.goodsName = ""
                self.loadStatus = false
              },
            });
          }
        }
      },

      //删除数据
      delGoods(param) {
        console.log(param)
      	var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(param.goodsImg==''){
          param.goodsImg==null
        }
        this.$http.delete("/api/CakeShop/GoodsManage/delGoods", {
          headers: {
            token: onlineManager.token
          },
          params: {
            goodsId:param.goodsId,
            goodsImg:param.goodsImg,
          }
        }).then((res) => {
          console.log(res)
          if (res.data.delSuccNum>0) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.getGoodsList(sessionStorage.getItem("page"))
              }
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000
            })
          }
        }, function(err) {})
      },


    },
  }
</script>

<style scoped>
  .menu {
    display: flex;
  	width: 100%;
  	padding: 10px 5px;
  	background: #FFFFFF;
  	box-sizing: border-box;
  	margin-bottom: 5px;
  }
  /* 模糊查询样式*/
  .menu .vagueFind{
    display: flex;
    background: #FFFFFF;
    margin-left: 20px;
  }
  .menu .vagueFind .el-form .el-form-item{
    margin-bottom: 0;
  }
  .menu .vagueFind .el-form .el-form-item .el-select{
     width: 130px;
  }
</style>
